<template>
  <div class="home">
   <nav role="navigation" class="navbar navbar-default">
                        <div class="container-fluid">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a href="http://www.xinde.org" class="navbar-brand">信德网</a>
                            </div>
                            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li><a href="/xinde/fics/index">首页</a></li>
                                    <li class="dropdown">
                                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">关于机构<span class="caret"></span></a>
                                        <ul role="menu" class="dropdown-menu">
                                            <li><a href="/xinde/fics/25684#jj">简介</a></li>
                                            <li><a href="/xinde/fics/25684#zc">章程</a></li>
                                            <li><a href="/xinde/fics/25684#md">目的</a></li>
                                            <li><a href="/xinde/fics/25684#xz">性质</a></li>
                                            <li><a href="/xinde/fics/25684#zz">宗旨</a></li>
                                            <li><a href="/xinde/fics/25684#rw">任务</a></li>
                                            <li><a href="/xinde/fics/25684#jg">机构</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="/xinde/fics/25689">研讨会暨学刊</a></li>
                                    <li><a href="/xinde/fics/25698">培训交流</a></li>
                                    <li><a href="/xinde/fics/25699">项目</a></li>
                                    <li><a href="/xinde/fics/zltj">资料</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
    <b-container>
      <div class="card">
        <div class="card-header">信德网 / 专题</div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6 mb-3" v-for="item in list" :key="item.id">
              <router-link :to="getUrl(item)">
                <img class="img-fluid" v-lazy="domain + item.banner">
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </b-container>
    <FooterIndex msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import FooterIndex from "@/components/FooterIndex.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import { mapState, mapActions } from "vuex";

export default {
  name: "home",
  components: {
    NavbarIndex,
    FooterIndex
  },
  data () {
     return { domain: process.env.VUE_APP_baseURL }
  },
  computed: {
    ...mapState({
      list: state => state.special.list
    })
  },
  created () {
    this.setList()
    // console.log(this.list)
  },
  methods: {
    ...mapActions('special', ['setList']),
    getUrl (item) {
      if (item.is_proseminar == 0) {
        return 'specialshow/' + item.id
      } else {
        return 'proseminarshow/' + item.id
      }
    }
  }
}
</script>

<style>
</style>

